<template>
  <Card class="!m-10px">
    <Form layout="inline" :label-col="{ span: 8 }">
      <FormItem label="一级分类">
        <Select
          v-model:value="category1Id"
          placeholder="请选择一级分类"
          class="!w-200px"
          :disabled="props.disabled"
        >
          <SelectOption v-for="c1 in categoryStore.getCategory1List" :key="c1.id" :value="c1.id">
            {{ c1.name }}
          </SelectOption>
        </Select>
      </FormItem>
      <FormItem label="二级分类">
        <Select
          v-model:value="category2Id"
          placeholder="请选择二级分类"
          class="!w-200px"
          :disabled="props.disabled"
        >
          <SelectOption v-for="c2 in categoryStore.getCategory2List" :key="c2.id" :value="c2.id">
            {{ c2.name }}
          </SelectOption>
        </Select>
      </FormItem>
      <FormItem label="三级分类">
        <Select
          v-model:value="categoryStore.category3Id"
          placeholder="请选择三级分类"
          class="!w-200px"
          :disabled="props.disabled"
        >
          <SelectOption v-for="c3 in categoryStore.getCategory3List" :key="c3.id" :value="c3.id">
            {{ c3.name }}
          </SelectOption>
        </Select>
      </FormItem>
    </Form>
  </Card>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'CategorySelector',
  });
</script>

<script lang="ts" setup>
  import { computed, onMounted } from 'vue';
  import { Card, Form, FormItem, Select, SelectOption } from 'ant-design-vue';
  import { useCategoryStore } from '/@/store/modules/category';

  const props = defineProps({
    disabled: {
      type: Boolean,
      required: true,
    },
  });
  // 组件使用pinia数据
  const categoryStore = useCategoryStore();

  const category1Id = computed({
    get() {
      return categoryStore.getCategory1Id;
    },
    async set(val: number) {
      categoryStore.setCategory2List(val);
    },
  });

  const category2Id = computed({
    get() {
      return categoryStore.getCategory2Id;
    },
    async set(val: number) {
      categoryStore.setCategory3List(val);
    },
  });

  onMounted(async () => {
    categoryStore.setCategory1List();
  });
</script>
